<template>
  <div :class="!iserror? 'app-content' :''" id="app" >
    <div  v-if="!iserror">
    <nav-bar :title="'充值'" :leftarrow="false" />
    <div>
      <div class="charge-title">充值订单：<img src="../../assets/star.png" width="5px" height="5px"></div>
      <div    :class="!showList?'charge-order showList':'charge-order'">
        <div class="content " v-show='showList'  @click='chooseOrder("order")'>{{order_msg}}</div>
          <div class="content" v-show='!showList'  @click='chooseOrder("order")'>
              <div><span>提交时间</span><span>{{showOrderCard.created_at}}</span></div>
              <div><span>支付方式</span><span>{{showOrderCard.name}}</span></div>
              <div><span>支付金额</span><span>{{showOrderCard.price}}</span></div>
              <div><span>订单号</span><span>{{showOrderCard.id}}</span></div>
          </div>
        <div class="right-arrow" @click='chooseOrder("order")'><i class="van-icon van-icon-play right-icon"></i></div>
      </div>

      <div><p  class="errorMessage" v-show='errorMessage.pay_id'>无充值订单信息不能提交</p></div>
      <div class="charge-title">付款时间：</div>
      <div class="charge-order pay-time w_65_"  ref="getPayat">
        <div class="content edit-input" @click='showDateTimePicker'>
          {{pay_at}}
          <!--<input v-model="appealData.pay_at" placeholder="" class="charge-input" ref="editNum">-->
        </div>
        <div class="right-arrow" @click='showDateTimePicker'><i class="cube-select-icon"></i></div>
      </div>
      <div class="charge-title">充值金额：</div>
      <div class="charge-order w-65_" id='charge-num'>
        <div class="content edit-input">
          <input v-model="appealData.pay_amount"  @keyup="ckAmount()"  placeholder="" class="charge-input" ref="editNum">

        </div>
        <div class="right-arrow" @click="focusclick">编辑</div>
      </div>
      <div><p  class="errorMessage"  v-show='errorMessage.pay_amount'>请正确填写充值金额</p></div>
      <div class="charge-title">付款实名制姓名：<img src="../../assets/star.png" width="5px" height="5px"></div>
      <cube-input v-model="appealData.name" placeholder="请填写真实姓名" class="pay-input w-65_" type="text" name="username"
                  v-on:blur="nameisChinese" :minlength="1" :maxlength="10"></cube-input>
      <p class="errorMessage" v-show='nameRule'>须填写正确信息</p>
      <div><p   class="errorMessage" v-show='errorMessage.name'>请填写姓名</p></div>
        <div class="charge-title">补充描述：</div>
        <cube-textarea v-model="appealData.desc" placeholder="您有任何想法可以在这里说明哦～" class="pay-textarea" :maxlength="1000"></cube-textarea>
        <div class="charge-title">提交凭证&nbsp;&nbsp;<span class="smallMessage">(付款截图)</span><img src="../../assets/star.png" width="5px" height="5px"></div>
      <div class="charge-title" @click='chooseOrder("uploadShouldKnow")'><cube-radio-group   v-model="selected" :options="options"   /></div>
      <!-- 图片上传 -->
      <div class="upload-box">
        <cube-upload class="cube-upload" v-model="uploadfiles" :max="5" :action="upAction" :auto="false" :simultaneous-uploads="1" @files-added="filesAdded" @file-submitted="filesSubmitted" @file-success="filesSuccess" @file-error="fileError"/>
      </div>
      <div><p   class="errorMessage" v-show='errorMessage.receipt'>请上传截图凭证</p></div>

      <div class="submit">
        <div>审核结果会以邮件方式发送，请耐心等待～ </div>
        <cube-button class="subbutton" @click="submitWorkOrder" :disabled="showLoading?true:false" >提交</cube-button>
      </div>
    </div>
    <!-- <cube-button>show toast</cube-button> -->
    <van-popup v-model="showChargeOrder" :position="value=='date'?'bottom':null" :class="value=='date'?null:'orderpup'" :id="value=='uploadShouldKnow'?'uploadknow':null">
      <!-- 显示订单遮罩层 -->
      <div class="charge-content" v-if="value=='order'" style="height: auto; overflow: hidden;">
        <!--<div style="position: fixed; top: 0; left: 0; width: 100%;">-->
        <div>
          <div class="title1">请选择充值订单</div>
          <div class="title2">可选择近七天未完成订单</div>
          <img src="../../assets/close2.png" @click='showChargeOrder=false'>
        </div>
        <div v-if="Unpaylist" style="height: 375px;overflow-y: scroll;">
          <ul v-if="Unpaylist.length">

            <li v-for="(item,index) in Unpaylist" :key="index"
                @click="addMsg(item)">
              <div><span>提交时间：</span><span>{{item.created_at}}</span></div>
              <div><span>支付方式：</span><span>{{item.name}}</span></div>
              <div><span>支付金额：</span><span>{{item.price}}</span></div>
              <div><span>订单号：</span><span>{{item.id}}</span></div>
            </li>
          </ul>
          <div  v-else style="text-align:center; margin:30px 0;">
            ~~暂无订单数据~~
          </div>
        </div>
        <div  v-else style="text-align:center; margin:30px 0;">
          ~~暂无订单数据~~
        </div>
      </div>
      <!-- 显示图片上传须知遮罩层 -->
      <div v-if="value=='uploadShouldKnow'">
        <div class="mask-iknow">
          <div class="content">
            <div class="title" style="color: red;">截图必须包含订单号</div>
            <van-swipe :autoplay="3000" indicator-color="#d48722" class="vanswipe">
              <van-swipe-item><p>微信转银行卡</p><img src="../../assets/example1.jpg"></van-swipe-item>
              <van-swipe-item><p>支付宝红包</p><img src="../../assets/example2.jpg"></van-swipe-item>
              <van-swipe-item><p>支付宝红包2</p><img src="../../assets/example3.jpg"></van-swipe-item>
              <van-swipe-item><p>支付宝收款码(线上定额支付宝)</p><img src="../../assets/example4.jpg"></van-swipe-item>
              <van-swipe-item><p>支付宝收款码(线上定额支付宝)2</p><img src="../../assets/example5.jpg"></van-swipe-item>
              <van-swipe-item><p>支付宝转银行卡</p><img src="../../assets/example6.jpg"></van-swipe-item>
            </van-swipe>
            <img class="iknow-img" src="../../assets/iknow.png" @click="showChargeOrder=false">
          </div>
        </div>
      </div>
    </van-popup>

      <div v-show='showLoading' class="showLoading"  >
        <cube-loading class="loading-div" :size="40"  ></cube-loading>
        <div class="loadingtext"  >{{loadingMsg}}</div>
      </div>
    </div>
    <error-page v-if="iserror" :iserror.sync="iserror"></error-page>
  </div>
</template>

<script>
  const dateFormat = require('dateformat')
  import {RadioGroup, Radio,Cell, Button, DatetimePicker, Field, Popup, Uploader, Swipe, SwipeItem} from 'vant'
  import NavBar from '@/components/customerService/NavBar.vue'
  import error from '@/pages/error/App.vue'
  import {getInfo, submitappeal} from '@/api/customerService'
  import {ckAmount,dataNullFilter} from '@/utils/ckData'
  import mixins from '@/model/mixins'


  export default {
    mixins: [mixins],
    components: {
      NavBar,
      'error-page':error,
      [Cell.name]: Cell,
      [Button.name]: Button,
      [DatetimePicker.name]: DatetimePicker,
      [Field.name]: Field,
      [Uploader.name]: Uploader,
      [Popup.name]: Popup,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [RadioGroup.name]: RadioGroup,
      [Radio.name]: Radio
    },
    data() {
      return {
        selected: '',
        options: ['查看示例'],
        loadingMsg:'',
        iserror:false,
        showChargeOrder: false,
        order_msg: '',
        showList: true,
        Unpaylist: [],
        appealData: {
            pay_amount:''
        },
        uploadfiles: [],
        pay_at: '',
        upAction: {
          target: 'http://up-z2.qiniup.com',
          data: new FormData()
        },
        showOrderCard: {},
        filename: [],
        value: '',
        nameRule: false,
        showLoading: false,
        iserrordata:false,
        errorMessage:{
            pay_amount:false,
          name:false,
            receipt:false,
          pay_id:false,
        },
        filenameNew: []
      }
    },
    created() {
    },
    mounted() {
      this.getUnpayStatus()
    },
    methods: {
      filesAdded (files) {
       let issee= this.seeexample();
        let hasIgnore = false
        const maxSize = 10 * 1024 * 1024 // 10M
        for (let k in files) {
          const file = files[k]
          if (file.size > maxSize ) {
            file.ignore = true
            hasIgnore = true
          }else if(!issee&&file!==1){
          file.ignore = true
          }
        }
        hasIgnore && this.$createToast({
          type: 'warn',
          time: 2000,
          txt: '选择的文件不能大于10M'
        }).show()
      },
      seeexample(){
        if(!this.selected.includes(this.options)){
          this.$createDialog({
            type: 'alert',
            content: '<p class="text-center">请选择<span class="color-red">查看示例</span>,</br>并按照示例提交付款凭证哦～</p>',
            confirmBtn: {
              text: '我知道了',
              active: true
            }
          }).show()
          return false;
        }else{
          return true
        }
      },
      submitWorkOrder() {
        this.loadingMsg="正在提交中..."

        if(this.filename.length!=0){
          this.appealData.receipt = this.filenameNew
        }
        this.errorMessage=dataNullFilter(this.appealData,this.errorMessage,this);
        this.$forceUpdate()
        if(this.iserrordata){
          return;
        }
        else{
          this.showLoading = true
          Object.assign(this.appealData,{type_id:1})
            submitappeal(this.appealData).then(res => {
            if (res.status === 0) {
              const QuerySerch = location.search
              location.href = `/success_cs${QuerySerch}`
            }  }).catch(error =>{
            this.showLoading = false
            if(error.response.data.status==-400) {
              this.iserror=true
            }
          })
        }
      },
      chooseOrder(pup) {
        this.showChargeOrder = true
        this.value = pup
      },
      selectHandle(date, selectedVal) {
        Object.assign(this.appealData,{pay_at: dateFormat(date, 'yyyy-mm-dd HH:MM:ss')})
        this.pay_at =  dateFormat(date, 'yyyy-mm-dd HH:MM:ss')
      },
      addMsg(item) {
        this.showList = false
        this.showOrderCard = item
        this.appealData.pay_id =  item.id
        this.appealData.pay_type=item.type
        this.pay_at = item.created_at
        Object.assign(this.appealData,{pay_at: item.created_at})
        this.appealData.pay_amount =  item.price
        this.showChargeOrder = false
        console.log(this.appealData)
      },
      getUnpayStatus() {
        let that = this
        this.order_msg = '数据加载中......'
        getInfo({type_id:1}, this.$router.history.current.query).then(res => {
          if (res.status === 0) {
            this.order_msg ='请选择充值订单'
            that.Unpaylist = res.data.items.filter(item=>{
              if( [0,1,2,4].includes(item.status))
                return item;
            })
          }
        })
      },
      // 点击编辑聚焦输入框
      focusclick() {
        this.$refs.editNum.focus()
      },
      // 校验姓名
      nameisChinese() {
        if (!this.appealData.name.match(/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/)) {
          this.nameRule = true
          this.appealData.name= ''
        } else {
          this.nameRule = false
        }
      },
      ckAmount(){
        this.appealData.pay_amount=ckAmount(this.appealData.pay_amount)
        this.$forceUpdate()
      }
    },
    beforeDestroy () {
    },
  }
</script>
<style lang="less">
  .border-bottom-1px::after{
    border: none !important;
  }
  .border-top-1px::before{
    border: none !important;
  }
  .cube-radio-wrap{
    padding: 0 0 0 0 !important;
  }
  .cube-radio-label{
    color: red;
  }
  .cube-radio {
    padding: 0 !important;
  }
</style>

